<template>
  <div class="mv-video-player-container">
    <video ref="video" controls="controls" autoplay muted ></video>
    <!-- :poster="url ? '' : poster" -->
  </div>
</template>

<script>
import flvjs from 'flv.js'
import GDPlayer from './config/GDPlayerPub'
import config from './config/index.js'

const VIDEO_TYPE = ['flvPlayer', 'GDPlayer']
/**
 * 视频播放器
 * @author 朱琦（zhuq@microvideo.cn）
 * @date   时间：2022/4/21
 */
export default {
  name: 'VideoPlayer',
  props: {
    /**
     * 视频类型
     */
    type: {
      type: String,
      default: VIDEO_TYPE[0]
    },
    /**
     * 视频地址
     */
    url: {
      type: String,
      default: ''
    },
    /**
     * 视频数据
     */
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    /**
     * 视频封面
     */
    poster: {
      type: String,
      default: require('@/assets/images/logo.png')
    }
  },
  data() {
    return {
      player: null
    }
  },
  watch: {
    url() {
      this.createPlayer()
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.createPlayer()
  },
  methods: {
    /**
     * 创建 播放器
     */
    createPlayer() {
      this.destroyPlayer()
      if (!this.url) return
      switch (this.type) {
        case 'GDPlayer':
          this.creteGDPlayer()
          break
        case 'flvPlayer':
          this.createFlvPlayer()
          break

        default:
          break
      }
    },
    /**
     * 创建 感动视频流 播放器
     */
    creteGDPlayer() {
      this.player = new GDPlayer()
      let playUrl = this.url // 视频播放地址
      let gatewayNum = this.data.gatewayNum // 网关编码
      let playerId = this.data.playerId // playerId
      let cameraNum = this.data.cameraNum // 相机编码
      this.$refs.video.srcObject = this.player.stream // 视频流渲染
      this.play(playUrl, cameraNum, gatewayNum, playerId)
    },
    /**
     * 创建 flv视频流 播放器
     */
    createFlvPlayer() {
      if (flvjs.isSupported()) {
        let video = this.$refs.video
        this.player = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          hasAudio: false,
          url: this.url
        })
        this.player.attachMediaElement(video)
        this.player.load()
        setTimeout(() => {
          this.player.play()
        }, 1000)
      }
    },
    /**
     * 感动播放器开始播放
     * @param {String} playUrl 视频播放地址
     * @param {String} deviceId 相机id
     * @param {String} gatewayId 网关id
     * @param {String} playerId 用户
     */
    play(playUrl, deviceId, gatewayId, playerId) {
      let IP = config.GD_VIDEO_IP
      let startTime = ''
      this.player
        .play(playUrl, IP, deviceId, gatewayId, playerId, startTime, null)
        .then(data => {
          console.log('>>>>>>视频连接成功<<<<<<')
        })
        .catch(e => {
          console.log('重连中...')
          setTimeout(() => this.play(playUrl, gatewayId, playerId, deviceId), 3000)
        })
    },
    /**
     * 销毁播放器
     */
    destroyPlayer() {
      if (!this.player) {
        return
      }
      if (this.type === 'flvPlayer') {
        this.player.pause()
        this.player.unload()
        this.player.detachMediaElement()
        this.player.destroy()
      } else {
        this.player.stopPlay()
      }
      this.player = null
    }
  },
  beforeDestroy() {
    this.destroyPlayer()
  }
}
</script>

<style scoped>
.mv-video-player-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.mv-video-player-container video {
  width: 100%;
  height: 100%;
}
</style>
